<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>互助湖经</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
     <style>
        a {
            text-decoration: none;
        }
    </style>
</head>

<style>
    .flash-message {
      width: 100%;
      justify-content: center;
      align-items: center;
      z-index: 1050;
    }

    .flash-message .alert {
      width: 100%;
      text-align: center;
    }

</style>

<div class="flash-message">
{% with messages = get_flashed_messages() %}
  {% if messages %}
    <div class="alert alert-info">
      {{ messages[0] }}
    </div>
  {% endif %}
{% endwith %}
</div>

<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    const flashMessage = document.querySelector('.flash-message');
    if (flashMessage) {
      flashMessage.style.display = 'block';
      setTimeout(() => {
        flashMessage.style.display = 'none';
      }, 3000);
    }
  });
</script>


    {% from 'tools/view/card.html' import nonModal %}

    {% set head %}
        <h4>登录</h4>
    {% endset %}

    {% set form_html %}
        <form method="POST">
            {{ form.hidden_tag() }}
            <div class="input-group mb-3">
                {{ form.username(class="form-control", placeholder="用户名") }}
            </div>
            <div class="input-group mb-3">
                {{ form.password(class="form-control", placeholder="密码") }}
            </div>
            <div class="row">
                <div class="col-4">
                    {{ form.sub_login(class="btn btn-primary btn-block") }}
                </div>
                <div class="col-4">
                    {{ form.sub_register(class="btn btn-primary btn-block") }}
                </div>
            </div>
        </form>
    {% endset %}


    <div class="login-page"><div class="login-box">
    {{ nonModal(head=head,body=form_html,collapse=False) }}
    </div></div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script>

</html>
